<template>
  <tiny-form :inline="true" :model="data.editData" class="demo-form-inline">
    <tiny-form-item label="表名">
      <vo-select :options="data.tableList" dictCode="sysTable" v-model:value="data.editData.tableName" @change="changeDataType(data.editData.tableName)" />
    </tiny-form-item>
    <tiny-form-item label="名称">
      <tiny-input v-model="data.editData.showName" placeholder="名称"></tiny-input>
    </tiny-form-item>
    <tiny-form-item label="备注">
      <tiny-input v-model="data.editData.remark"></tiny-input>
    </tiny-form-item>
    <tiny-form-item> <tiny-button type="primary" @click="saveBtn">保存</tiny-button></tiny-form-item>
  </tiny-form>

  <vo-table ref="baseGrid" :data="data.tableData">
    <template v-slot:isShowStuts="{row}">
      <tiny-switch v-model="row.isShow" active-value="1" inactive-value="0" active-color="#13ce66" inactive-color="#ff4949"> </tiny-switch>
    </template>
    <template v-slot:handleSlot="{row}">
      <tiny-button-group class="ml-4">
        <tiny-button type="text" size="mini" @click="delRow(row)"><yu-icon fontSize="17px" color="red" iconName="shanchu" /> </tiny-button>
      </tiny-button-group>
    </template>
  </vo-table>
</template>

<script setup>
  import {reactive, ref, toRef, onMounted, getCurrentInstance} from 'vue';
  import {Modal, Notify} from '@opentiny/vue';
  let {proxy} = getCurrentInstance();
  const baseGrid = ref(null);
  const data = reactive({
    editData: {},
    tableData: {data: [], cols: [], tableArrts: {}},
    tableList: [],
  });
  const props = defineProps({
    editData: {type: Object, defult: {}},
    isShow: {type: Boolean, defult: false},
  });

  const emits = defineEmits(['update:isShow']);
  data.editData = toRef(props, 'editData');
  onMounted(() => {
    getTable();
    //加载明细
    loadDetail();
  });
  const saveBtn = () => {
    var param = {sysTable: data.editData, sysTableDetail: data.tableData.data};
    proxy.$api.data.sysTableEdit(param).then(res => {
      if (res.code != -1) {
        Modal.message({
          status: 'success',
          message: res.msg,
        });
        emits('update:isShow', false);
        emits('querySysTable');
      } else {
        // 关闭对话框
        Modal.message({
          status: 'error',
          message: res.msg,
        });
      }
    });
  };
  const getTable = async () => {
    data.tableList = await proxy.$api.data.getTableName();
  };
  const changeDataType = async val => {
    data.tableData.data = await proxy.$api.data.getTableColumnsByTable({tableName: val});
  };
  const loadDetail = async () => {
    if (data.editData.tableId != null) {
      data.tableData.data = await proxy.$api.data.sysTableDetail(data.editData);
    }
  };
  data.tableData.cols = [
    {type: 'index', title: '序号'},
    {type: 'selection'},
    {title: '取值字段', key: 'itemField', align: 'left', edit: {editor: 'true', type: 'input', attrs: {}}},
    {title: '显示名称', key: 'titleShow', align: 'left', edit: {editor: 'true', type: 'input', attrs: {}}},
    {title: '字段类型', key: 'itemType', align: 'left'},
    {title: '数据转换', key: 'format', align: 'left', edit: {editor: 'true', type: 'input', attrs: {}}},
    {title: '是否显示', key: 'isShow', align: 'left', slot: 'isShowStuts'},
    {
      title: '操作',
      align: 'center',
      slot: 'handleSlot',
      width: 200,
    },
  ];
  const up = (row, index) => {
    if (index > 0) {
      data.tableData.data.splice(index, 1);
      data.tableData.data.splice(index - 1, 0, row);
    }
  };

  const delRow = row => {
    baseGrid.value.grid().remove(row);
  };
</script>
<style lang="scss" scoped></style>
